<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2024-05-24 14:15:41
-->
<script setup>
import { ref, watch, reactive, onMounted } from "vue";
import { createUrlValidator, validatorVideoTitle } from "@/utils/validator.js";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  appendBody: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [String, Number],
    default: "850",
  },
  // 可通过 插槽自定义
  title: {
    type: String,
    default: "dialog",
  },
  // 遮罩层
  modal: {
    type: Boolean,
    default: true,
  },
  // 关闭按钮显示状态
  showClose: {
    type: Boolean,
    default: true,
  },
  // 使对话框水平垂直居中
  alineCenter: {
    type: Boolean,
    default: true,
  },
  // 内容居中
  center: {
    type: Boolean,
    default: false,
  },
  // 关闭时销毁=== v-if
  destroyDialog: {
    type: Boolean,
    default: true,
  },
  // 拖拽
  draggable: {
    type: Boolean,
    default: false,
  },
  // 让拖拽范围超出可视区
  overflow: {
    type: Boolean,
    default: false,
  },
  itemRow: {
    type: Object,
    default: () => {},
  },
  clickBlankToClose: {
    type: Boolean,
    default: false,
  },
  formData: {
    type: Object,
    default: () => {},
  },
  channeOptions: {
    type: Array,
    default: () => [
      {
        value: 1,
        label: "微信",
        disabled: false,
      },
      {
        value: 2,
        label: "京东",
        disabled: false,
      },
      {
        value: 3,
        label: "天猫",
        disabled: false,
      },
    ],
  },
});
const dialogVisible = ref(false);
const emit = defineEmits(["update:modelValue", "updateTable"]);
const channeOptions = ref([
  {
    value: 1,
    label: "微信",
    disabled: false,
  },
  {
    value: 2,
    label: "京东",
    disabled: false,
  },
  {
    value: 3,
    label: "天猫",
    disabled: false,
  },
]);
let form = reactive({
  url: "", //shopUrl  店铺链接
  qrPicture: "", //二维码链接
  qrText: "", //二维码标题
  clickBtn: "", //按钮图片链接
  channel: "", //渠道
  channelName: "", //店铺名称
  path: "", // 微信单独参数 path query
  query: "", // 微信单独参数 path query
});
onMounted(() => {});
const ruleFormRef = ref(null);
const rules = reactive({
  url: [
    {
      required: true,
      validator: createUrlValidator("店铺链接"),
      trigger: "blur",
    },
  ],
  qrPicture: [
    {
      required: true,
      validator: createUrlValidator("二维码链接"),
      trigger: "blur",
    },
  ],
  qrText: [
    {
      required: true,
      validator: validatorVideoTitle("二维码标题", 10),
      trigger: "blur",
    },
  ],
  clickBtn: [
    {
      required: true,
      validator: createUrlValidator("按钮图片链接"),
      trigger: "blur",
    },
  ],
  channel: [{ required: true, message: "请选择渠道", trigger: "blur" }],
  channelName: [
    {
      required: true,
      validator: validatorVideoTitle("店铺名称", 10),
      trigger: "blur",
    },
  ],
  path: [{ required: true, message: "请输入路由", trigger: "blur" }],
  query: [{ required: true, message: "请输入路由参数", trigger: "blur" }],
});
// 提交
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (props.title === "新增") {
        emit("addChange", JSON.parse(JSON.stringify(form)));
      } else {
        form.updateTime = new Date().getTime();
        emit("editChange", JSON.parse(JSON.stringify(form)));
      }
      dialogVisible.value = false;
    }
  });
};

const changeChannel = (val) => {
  for (const key in form) {
    form[key] = "";
  }
};

watch(
  () => props.itemRow,
  (val) => {
    form = val;
  },
  {
    deep: true,
  }
);

watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
    if (!val) {
      // 重置 form 对象
      for (const key in form) {
        form[key] = "";
      }
    }
  }
);
// 监听 form.channel 的变化
watch(
  () => form.channel,
  (newVal) => {
    if (newVal == 1) {
      // 当 channel 为 1 时，移除 url 的验证规则
      rules.url = [];
    } else {
      // 否则恢复 url 的验证规则
      rules.url = [
        {
          required: true,
          validator: createUrlValidator("店铺链接"),
          trigger: "blur",
        },
      ];
    }
  },
  { immediate: true } // 立即执行一次
);

</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :align-center="props.alineCenter"
    :draggable="props.draggable"
    :overflow="props.overflow"
    :show-close="props.showClose"
    :destroy-on-close="destroyDialog"
    :center="props.center"
    :modal="props.modal"
    :append-to-body="props.appendBody"
    :header="props.title"
    :width="props.width"
    :before-close="emit('update:modelValue', dialogVisible)"
    modal-class="dialog-class"
    class="dialog-style"
    :close-on-click-modal="props.clickBlankToClose"
  >
    <!-- 自定义头部 -->
    <template #header="{ titleId, titleClass }">
      <div class="flex flex-row justify-between gap-4">
        <h4 :id="titleId" :class="titleClass">{{ props.title }}</h4>
      </div>
    </template>

    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
    </template>

    <el-form
      :model="form"
      label-width="130px"
      style="max-width: 800px"
      :rules="rules"
      ref="ruleFormRef"
      class="mt-4"
    >
      <el-form-item label="渠道：" prop="channel">
        <el-select
          @focus="changeFocus"
          v-model="form.channel"
          placeholder="请选择渠道"
          style="width: 100%"
          :disabled="true"
        >
          <el-option
            @change="changeChannel"
            v-for="item in channeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="店铺名称：" prop="channelName">
        <inputCom v-model="form.channelName" />
      </el-form-item>
      <el-form-item label="店铺链接：" v-if="form.channel === 1">
        <inputCom v-model="form.url" placeholder=" "  :disabled="true" />
      </el-form-item>
      <el-form-item label="店铺链接：" prop="url" v-else>
        <inputCom v-model="form.url" :disabled="form.channel === 1" />
      </el-form-item>
      <el-form-item label="二维码链接：" prop="qrPicture">
        <div class="flex items-center gap-4">
          <inputCom v-model="form.qrPicture" />
          <el-image
            v-if="form.qrPicture"
            style="width: 100px; height: 100px; margin-top: 10px"
            :src="form.qrPicture"
            :preview-src-list="[form.qrPicture]"
            fit="cover"
          />
        </div>
      </el-form-item>
      <el-form-item label="二维码标题：" prop="qrText">
        <inputCom v-model="form.qrText" />
      </el-form-item>
      <el-form-item label="按钮图片链接：" prop="clickBtn">
        <div class="flex items-center gap-4">
          <inputCom v-model="form.clickBtn" />
          <el-image
            v-if="form.clickBtn"
            style="width: 100px; height: 100px; margin-top: 10px"
            :src="form.clickBtn"
            :preview-src-list="[form.clickBtn]"
            fit="cover"
          />
        </div>
      </el-form-item>

      <!-- 新增条件渲染 -->
      <template v-if="form.channel === 1">
        <el-form-item label="路由参数：" prop="query">
          <inputCom v-model="form.query" />
        </el-form-item>
        <el-form-item label="路由：" prop="path">
          <inputCom v-model="form.path" />
        </el-form-item>
      </template>
    </el-form>
  </el-dialog>
</template>

<style lang="less" scoped></style>
